<template>
  <view class="container">
    <view class="container-box">
      <view class="container-inner">
        <view class="loginBox">
          <view class="titleTop">
            <view class="titleTopInner" data-text="无纸化系统-登录">无纸化系统-登录</view>
          </view>
          <view class="login">
            <view :class="nameFlag ? 'field fieldTrue' : 'field'">
              <input class="inputClass" type="text" placeholder @focus="focusName" @blur="blurName" v-model="name" />
              <view :class="nameFlag ? 'placeholder placeholderTrue' : 'placeholder'">用户名</view>
            </view>
            <view :class="passwordFlag ? 'field fieldTrue' : 'field'">
              <input class="inputClass" type="password" placeholder @focus="focusPassword" @blur="blurPassword"
                v-model="password" />
              <view :class="passwordFlag ? 'placeholder placeholderTrue' : 'placeholder'">密码</view>
            </view>
          </view>
        </view>
        <view>
          <!-- <nut-button style='margin-bottom: 10px;width: 100%;' type="primary" size="normal" @click="aaa">登 录</nut-button> -->
          <view :class="loginFlag ? 'loginbtn' : 'loginbtn loginIng'" @click="loginHandle">{{ loginText }}</view>
        </view>
      </view>
      <nut-notify></nut-notify>
    </view>
      <custom-success ref="customSucc"></custom-success>
  </view>
</template>
<script lang="ts" setup>
import mRequest from '@/api/index.js'
import {Encrypt} from '@/common/AESUtils'
import customSuccess from '@/components/custom-success/custom-success.vue'
const customSucc = ref(null);
const notify = useNotify()
const nameFlag = ref(false)
const name = ref("admin")
if (name.value) {
  nameFlag.value = true
} else {
  nameFlag.value = false
}
function focusName() {
  nameFlag.value = true
}
function blurName() {
  if (name.value) {
    nameFlag.value = true
  } else {
    nameFlag.value = false
  }
}
const passwordFlag = ref(false)
const password = ref("admin")

if (password.value) {
  passwordFlag.value = true
} else {
  passwordFlag.value = false
}

function focusPassword() {
  passwordFlag.value = true
}
function blurPassword() {
  if (password.value) {
    passwordFlag.value = true
  } else {
    passwordFlag.value = false
  }
}

const loginFlag = ref(false)
const loginText = ref("登 录")
function loginHandle() {
  if(!name.value){
    notify.danger("请输入账号", {
      duration: 1000
    });
    return
  }
  if(!password.value){
    notify.danger("请输入密码", {
      duration: 1000
    });
    return
  }
  mRequest.loginByMobile({
    userName: name.value,
    password: Encrypt(password.value)
  }).then(res => {
    uni.setStorageSync('userToken', res.token)
    setTimeout(() => {
      customSucc.value.customMethod()
    }, 1000);
    // notify.success("登录成功", {
    //   duration: 1000
    // });
  }).catch(err => {
    // notify.error("登录成功", {
    //   duration: 1000
    // });
    console.log(err,'retrtrt')
  })
  // loginFlag.value = true;
  // loginText.value = "登录中ing";
  // setTimeout(() => {
  //   loginFlag.value = false;
  //   loginText.value = "登 录";
  //   notify.danger("登录失败", {
  //     duration: 1000
  //   });
  // }, 2000);
}
</script>
<style lang='scss'>
.container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;

  .container-box {
    width: 360rpx;
    height: 400rpx;
    background: rgba(213, 64, 64, 0.8);
    // padding: 40rpx 20rpx;
    border-radius: 10rpx;
    z-index: 100;
    position: relative;
    border-radius: 20rpx;
    overflow: hidden;
  }

  .container-inner {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    padding: 20rpx;
    box-sizing: border-box;

    .container-inner-form {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20rpx;

      // border-bottom: 1px solid red;
      .form-label {
        width: 40rpx;
        color: #fff;
        font-size: 16px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 10rpx;
      }
    }
  }

  .container-box:after {
    z-index: 1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://online-shopping-mall-1315716959.cos.ap-beijing.myqcloud.com/20250207/9c5d168ba35a4f2fa78c596ade092774.png");
    background-size: 100% 100%;
  }
}

.container:after {
  content: "";
  height: 240vh;
  width: 200vw;
  position: fixed;
  top: -120vh;
  left: -150vw;
  width: 400vw;
  height: 400vh;
  background: linear-gradient(0deg, $primary-color-end, $danger-color-end, $success-color-end, $warning-color-end);
  background-size: 100% 100%;
  transform: rotate(0deg);
  /* 旋转45度 */
  transform-origin: center center;
  /* 旋转点在左上角 */
  animation: change 8s linear infinite;
  overflow: hidden;
}

@keyframes change {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateBackground {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>
<style lang='scss'>
.loginBox {
  margin: 0;
  padding: 0;
  width: 100%;
  /* color: black; */
  overflow: hidden;
  display: grid;
  place-content: center;
}

.titleTop {
  height: 80rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .titleTopInner {
    display: inline-block;
    position: relative;
    width: auto;
    height: 40rpx;
    color: $primary-color;
    font-size: 30rpx;
    margin: 40rpx 10rpx 20rpx;
  }

  .titleTopInner::after {
    content: attr(data-text);
    /* 使用自定义属性来复制文本 */
    position: absolute;
    left: 0;
    text-align: center;
    bottom: -20rpx;
    /* 调整位置以创建倒影效果 */
    color: rgba(202, 231, 55, 0.16);
    /* 调整颜色和透明度 */
    transform: scaleY(-0.5);
    /* 垂直翻转 */
  }
}

.login {
  // background: #151617;
  width: 300rpx;
  padding: 20rpx;
  border-radius: 15px;
  display: grid;
  gap: 5px;
}

@property --anim {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.field {
  /* background: rgba(255, 255, 255, 0) !important; */
  border-radius: 8px;
  margin-bottom: 10rpx;
  position: relative;
  height: 44rpx;
  --anim: 0;
  transition: --anim 500ms ease;

  background: linear-gradient(to right,
      $primary-color calc(clamp(0, (var(--anim) - 0.75) / 0.25, 1) * 33%),
      transparent calc(clamp(0, (var(--anim) - 0.75) / 0.25, 1) * 33%),
      transparent calc(100% - clamp(0, (var(--anim) - 0.75) / 0.25, 1) * 33%),
      $primary-color calc(100% - clamp(0, (var(--anim) - 0.75) / 0.25, 1) * 33%)),
    linear-gradient(to top,
      transparent calc(15% + clamp(0, (var(--anim) - 0.65) / 0.1, 1) * 70%),
      #202122 calc(15% + clamp(0, (var(--anim) - 0.65) / 0.1, 1) * 70%)),
    linear-gradient(to right,
      transparent calc(50% - clamp(0, var(--anim) / 0.65, 1) * 50%),
      $primary-color calc(50% - clamp(0, var(--anim) / 0.65, 1) * 50%),
      $primary-color calc(50% + clamp(0, var(--anim) / 0.65, 1) * 50%),
      transparent calc(50% + clamp(0, var(--anim) / 0.65, 1) * 50%)),
    linear-gradient(#202122, #202122);
}

.inputClass {
  height: 40rpx !important;
  border-radius: 6rpx !important;
}

/* .field:has(input:focus) {
        --anim: 1;
      } */

.fieldTrue {
  --anim: 1;
}

.field>.placeholder {
  pointer-events: none;
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  color: $primary-color;
  font-family: "Inter";
  transition: transform 500ms ease;
}

.placeholderTrue {
  transform: translateY(-50%) scale(0.85);
}

.field>input {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  color: white;
  position: absolute;
  inset: 2rpx;
  border-radius: 14rpx;
  border: none;
  outline: none;
  background: #202122;
}

.loginbtn {
  margin: 0 10rpx;
  background: radial-gradient(circle at center,
      $primary-color calc(-50% + var(--anim) * 150%),
      #202122 calc(var(--anim) * 100%));
  border-radius: 14rpx;
  position: relative;
  height: 44rpx;
  display: grid;
  place-content: center;
  color: $primary-color-end;
  font-family: "Inter";
  --anim: 0;
  transition: --anim 500ms ease, color 500ms ease;
}

.loginIng {
  --anim: 1;
  color: white;
  cursor: pointer;
}
</style>